<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
            width: 100%;
        }
        .container{
            height: 100%;
            width: 100%;
            /* background-color: lightcyan; */
        }
        #canvas,
        #cvs_scale {
            /* border: solid 1px #000; */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas width="1000" height="600" id="cvs_scale"></canvas>
        <canvas width="1000" height="600" id="canvas"></canvas>
    </div>
    <script type="module">
        import Graph from './graph.js';

        var cvs = document.getElementById('cvs_scale');
        var ctx_scale = cvs.getContext('2d');

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        let graph = new Graph(ctx,ctx_scale);
        graph.data = [
            { x: 0, y: 0 },
            { x: 1, y: 0.01/7 },
            { x: 2, y: 0.04/7 },
            // { x: 3, y: 0.09/7 },
            // { x: 4, y: 0.16/7 },
            // { x: 5, y: 0.25/7 },
            // { x: 6, y: 0.36/7 },
            // { x: 7, y: 0.49/7 },
            // { x: 8, y: 0.64/7 },
            // { x: 9, y: 0.81/7 },
            // { x: 10, y: 1/7 },
            // { x: 11, y: 1.21/7 },
            // { x: 12, y: 1.44/7 },
            // { x: 13, y: 1.69/7 },
            // { x: 14, y: 1.96/7 },
            // { x: 15, y: 2.25/7 },
            // { x: 16, y: 2.56/7 },
        ];
        graph.init()
        graph.height = 600;
        graph.width = 1000;
        graph.lenAxisX = 900;
        graph.lenAxisY = 500;
        console.log(graph);
        
    </script>
</body>
</html>